<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-50 font-sans flex">
    <!-- Side Navigation -->
    <aside :class="['bg-white shadow-sm transition-all duration-300', isCollapsed ? 'w-16' : 'w-64']">
      <div class="h-16 flex items-center justify-center border-b border-gray-200">
        <div v-if="!isCollapsed" class="text-lg font-semibold text-gray-800">养老易管理系统</div>
        <el-icon v-else class="text-xl text-gray-600"><HomeFilled /></el-icon>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="h-[calc(100vh-4rem)]"
          :collapse="isCollapsed"
          @select="handleSelect"
      >
        <el-menu-item index="/">
          <el-icon><HomeFilled /></el-icon>
          <template #title>首页</template>
        </el-menu-item>

        <el-sub-menu index="employee">
          <template #title>
            <el-icon><User /></el-icon>
            <span>员工管理</span>
          </template>
          <el-menu-item index="/employee/caregiver">护工管理</el-menu-item>
          <el-menu-item index="/employee/leave">请假管理</el-menu-item>
          <el-menu-item index="/employee/salary">工资管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="elderly">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>老人管理</span>
          </template>
          <el-menu-item index="/elderly/room">房间管理</el-menu-item>
          <el-menu-item index="/elderly/info">老人管理</el-menu-item>
          <el-menu-item index="/elderly/meal">订餐管理</el-menu-item>
          <el-menu-item index="/elderly/service">服务管理</el-menu-item>
        </el-sub-menu>
      </el-menu>

      <div
          class="absolute bottom-4 left-0 right-0 flex justify-center cursor-pointer"
          @click="toggleCollapse"
      >
        <el-icon class="text-gray-600 text-xl">
          <component :is="isCollapsed ? 'Expand' : 'Fold'" />
        </el-icon>
      </div>
    </aside>

    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- Top Navigation -->
      <header class="bg-white shadow-sm">
        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
              <i class="el-icon-user-solid text-white text-xl"></i>
            </div>
            <h1 class="text-xl font-semibold text-gray-800">养老易管理系统</h1>
          </div>
          <div class="relative w-1/3">
            <input
                type="text"
                placeholder="搜索服务、老人或员工..."
                class="w-full py-2 px-4 pl-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent"
            >
            <i class="el-icon-search absolute left-3 top-3 text-gray-400"></i>
          </div>
          <div class="flex items-center space-x-6">
            <button class="relative">
              <i class="el-icon-bell text-gray-600 text-xl"></i>
              <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">3</span>
            </button>
            <el-dropdown>
              <button class="flex items-center space-x-1">
                <i class="el-icon-user text-gray-600 text-xl"></i>
                <span class="text-sm text-gray-600">管理员</span>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <i class="el-icon-user mr-2"></i>个人中心
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-lock mr-2"></i>密码修改
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <i class="el-icon-switch-button mr-2"></i>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </header>
      <!-- Main Content -->
      <main class="container mx-auto px-6 py-8">
        <!-- Health Stats -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          <!-- Elderly Health Card -->
          <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-lg font-semibold text-gray-800">老人健康监控</h2>
              <i class="el-icon-first-aid-kit text-blue-500 text-xl"></i>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div class="bg-blue-50 rounded-lg p-4">
                <p class="text-sm text-gray-500 mb-1">平均体温</p>
                <p class="text-2xl font-bold text-blue-600">36.5°C</p>
                <p class="text-xs text-green-500 mt-1">正常范围</p>
              </div>
              <div class="bg-blue-50 rounded-lg p-4">
                <p class="text-sm text-gray-500 mb-1">平均心率</p>
                <p class="text-2xl font-bold text-blue-600">72 bpm</p>
                <p class="text-xs text-green-500 mt-1">正常范围</p>
              </div>
              <div class="bg-blue-50 rounded-lg p-4">
                <p class="text-sm text-gray-500 mb-1">血压</p>
                <p class="text-2xl font-bold text-blue-600">120/80</p>
                <p class="text-xs text-green-500 mt-1">正常范围</p>
              </div>
              <div class="bg-blue-50 rounded-lg p-4">
                <p class="text-sm text-gray-500 mb-1">血氧</p>
                <p class="text-2xl font-bold text-blue-600">98%</p>
                <p class="text-xs text-green-500 mt-1">正常范围</p>
              </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <p class="text-sm text-gray-600">今日异常: <span class="text-red-500">2 人</span> 需要关注</p>
            </div>
          </div>
          <!-- Staff Attendance Card -->
          <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-lg font-semibold text-gray-800">员工考勤</h2>
              <i class="el-icon-time text-blue-500 text-xl"></i>
            </div>
            <div class="space-y-4">
              <div>
                <p class="text-sm text-gray-500 mb-1">今日出勤率</p>
                <div class="flex items-center space-x-4">
                  <div class="w-16 h-16 rounded-full flex items-center justify-center bg-blue-100">
                    <span class="text-xl font-bold text-blue-600">92%</span>
                  </div>
                  <div class="flex-1">
                    <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                      <div class="h-full bg-blue-500 rounded-full" style="width: 92%"></div>
                    </div>
                    <div class="flex justify-between text-xs text-gray-500 mt-1">
                      <span>出勤: 46人</span>
                      <span>缺勤: 4人</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-4">
                <div class="bg-blue-50 rounded-lg p-3">
                  <p class="text-sm text-gray-500 mb-1">迟到</p>
                  <p class="text-xl font-bold text-blue-600">2人</p>
                </div>
                <div class="bg-blue-50 rounded-lg p-3">
                  <p class="text-sm text-gray-500 mb-1">请假</p>
                  <p class="text-xl font-bold text-blue-600">2人</p>
                </div>
              </div>
            </div>
          </div>
          <!-- Food Ranking Card -->
          <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-lg font-semibold text-gray-800">菜品排名</h2>
              <i class="el-icon-food text-blue-500 text-xl"></i>
            </div>
            <div class="space-y-3">
              <div v-for="(item, index) in topFoods" :key="index" class="flex items-center space-x-3">
                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                  <span class="text-sm font-bold text-blue-600">{{ index + 1 }}</span>
                </div>
                <div class="flex-1">
                  <p class="text-sm font-medium text-gray-800">{{ item.name }}</p>
                  <div class="flex items-center space-x-2">
                    <div class="h-2 bg-gray-200 rounded-full flex-1 overflow-hidden">
                      <div class="h-full bg-blue-500 rounded-full" :style="`width: ${item.percentage}%`"></div>
                    </div>
                    <span class="text-xs text-gray-500">{{ item.percentage }}%</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <p class="text-sm text-gray-600">今日满意度: <span class="text-green-500">4.8/5</span></p>
            </div>
          </div>
        </div>
        <!-- Quick Access -->
        <div class="mb-8">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">快捷访问</h2>
          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <div v-for="(item, index) in quickAccess" :key="index"
                 class="bg-white rounded-xl shadow-sm p-4 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-50 transition-colors">
              <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
                <i :class="`el-icon-${item.icon} text-blue-500 text-xl`"></i>
              </div>
              <p class="text-sm font-medium text-gray-800 text-center">{{ item.name }}</p>
            </div>
          </div>
        </div>
        <!-- Recent Activities -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-800">近期活动</h2>
            <button class="text-sm text-blue-500 hover:text-blue-600">查看全部</button>
          </div>
          <div class="space-y-4">
            <div v-for="(item, index) in recentActivities" :key="index" class="flex items-start space-x-3">
              <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mt-1">
                <i :class="`el-icon-${item.icon} text-blue-500 text-sm`"></i>
              </div>
              <div class="flex-1">
                <p class="text-sm font-medium text-gray-800">{{ item.title }}</p>
                <p class="text-xs text-gray-500">{{ item.time }}</p>
              </div>
            </div>
          </div>
        </div>
      </main>
      <!-- Bottom Navigation -->
      <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-6">
          <div class="flex items-center justify-between">
            <p class="text-sm text-gray-500">© 2023 养老易管理系统 - 为老年人提供专业服务</p>
            <div class="flex items-center space-x-4">
              <button class="text-sm text-gray-500 hover:text-blue-500">帮助中心</button>
              <button class="text-sm text-gray-500 hover:text-blue-500">关于我们</button>
              <button class="text-sm text-gray-500 hover:text-blue-500">联系我们</button>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { HomeFilled, User, UserFilled, Expand, Fold } from '@element-plus/icons-vue';

const isCollapsed = ref(false);
const activeMenu = ref('/');

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const handleSelect = (index: string) => {
  activeMenu.value = index;
};
const topFoods = ref([
  { name: '清蒸鲈鱼', percentage: 85 },
  { name: '红烧狮子头', percentage: 78 },
  { name: '香菇菜心', percentage: 72 },
  { name: '冬瓜排骨汤', percentage: 68 },
  { name: '番茄炒蛋', percentage: 65 }
]);
const quickAccess = ref([
  { name: '入住管理', icon: 'house' },
  { name: '健康档案', icon: 'document' },
  { name: '护理计划', icon: 'notebook-2' },
  { name: '财务管理', icon: 'money' },
  { name: '统计报表', icon: 'data-line' },
  { name: '设备维护', icon: 'tools' }
]);
const recentActivities = ref([
  {
    title: '张奶奶完成了今日健康检查',
    time: '10分钟前',
    icon: 'check'
  },
  {
    title: '李爷爷预约了明天上午的理疗',
    time: '30分钟前',
    icon: 'calendar'
  },
  {
    title: '王护士完成了3号房间的日常护理',
    time: '1小时前',
    icon: 'finished'
  },
  {
    title: '系统已自动生成月度健康报告',
    time: '2小时前',
    icon: 'document'
  }
]);
</script>
<style scoped>
/* Custom styles */
.bg-blue-50 {
  background-color: #E6F3FF;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu--collapse) {
  width: 100%;
}
</style>
